<lv-group lvDirection="vertical" lvGutter="16px">
  <lv-search style="width: 272px" [(ngModel)]="value" [lvFocus]="true" (ngModelChange)="updateSearch($event)"></lv-search>

  <lv-treetable
    [lvData]="data"
    #lvTable
    [lvPaginator]="page"
    lvCompareWith="data.id"
    lvSelectionMode="multiple"
    [lvSelection]="selection"
    (lvSelectionChange)="selectionChange($event)"
    (lvStateChange)="stateChange($event)"
  >
    <thead>
      <tr>
        <th lvShowCheckbox lvCellKey="id">Name</th>
        <th lvCellKey="object">Object</th>
        <th lvCellKey="permission">Permission</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: lvTable.renderData, level: 0 }"></ng-container>

      <!-- template -->
      <ng-template #bodyContentTpl let-data let-level="level">
        <ng-container *ngFor="let item of data">
          <tr>
            <td
              lvShowCheckbox
              [lvShowExpanded]="item.children?.length"
              [(lvExpanded)]="item.expanded"
              [lvExpandedToggleIcon]="{ true: 'lv-icon-arrow-down', false: 'lv-icon-arrow-right' }"
              [lvPaddingLeft]="level * 24 + 'px'"
              [lvRowData]="item"
            >
              <span *ngIf="item.children?.length">{{ item.data.id }}</span>
              <span *ngIf="!item.children?.length">{{ item.data.currentKey }}</span>
            </td>
            <td>{{ item.data.object }}</td>
            <td>{{ item.data.permission }}</td>
          </tr>
          <ng-container *ngIf="item.expanded && item.children?.length">
            <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: item.children, level: level + 1 }"></ng-container>
          </ng-container>
        </ng-container>
      </ng-template>
    </tbody>
  </lv-treetable>

  <lv-paginator #page lvPageSize="5"></lv-paginator>
</lv-group>
